<header class="header-container" ng-include="'/partials/header.html'"></header>
<div class="middle-container tasks-view">
    <div class="view-header">
        <p class="title">{{ 'task.task-ref'|i18next:{ref: task.ref} }}</p>
        <div class="buttons">
            <a class="button button-delete" ng-click="ctrl.removeObject(task)" i18next="task.delete-task">Delete task</a>
        </div>
    </div>

    <ul class="tags-list">
        <li class="tag" ng-repeat="tag in task.tags" gm-colorize-tag="tag">{{ tag }}</li>
    </ul>

    <div class="row-fluid task-data">
        <div class="span8 task-data-description">
            <h2>{{ task.subject }}</h2>
            <div class="blocked-alert" ng-show="task.is_blocked">
                <div class="icon blocked"data-icon="o"></div>
                <div class="reasons" ng-bind-html="task.blocked_note_html"></div>
            </div>
            <div ng-bind-html="task.description_html"></div>
            <div class="attachments" ng-show="attachments.length > 0 || newAttachments[0].status != undefined">
                <h3 i18next="task.attachments">Attachments</h3>
                <ul class="attachments-items">
                    <li class="attachments-item" ng-repeat="attachment in attachments">
                        <a class="delete" data-icon="h" href="" i18next="title:task.delete-attachment"
                           title="Delete attachment" ng-click="ctrl.removeAttachment(attachment)"></a>
                        <a href="{{ attachment.url }}" target="_blank">{{ attachment.name }}</a>
                        <span>[{{ attachment.size|sizeFormat }}]</span>
                        <span>{{ "task.on-date"|i18next:{date:momentFormat(attachment.created_date, 'LLLL')} }}</span>
                    </li>
                </ul>
                <ul class="attachments-items in-progress">
                    <li class="attachments-item" ng-repeat="attachment in newAttachments">
                        <div ng-show="attachment.status != undefined">
                            <span ng-show="attachment.status == 'done'"
                                  class="status done" data-icon="z"></span>
                            <span ng-show="attachment.status == 'in-progress'"
                                  class="status in-progress spinner"></span>
                            <span ng-show="attachment.status == 'error'"
                                  class="status error" data-icon="o"></span>
                            <div class="progress-bar">
                                <span style="width: {{ attachment.uploadPercent }}%;">
                                    {{ attachment.uploadPercent }} %
                                </span>
                            </div>
                            <span class="progress-data">({{ attachment.progressSizeData }})</span>
                            <span class="name">{{ attachment.name }}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="span4 task-metadata">
            <div class="info-header">
                <h3 i18next="task.task-data">Task data</h3>
            </div>
            <ul class="info-rows">
                <li data-icon="t">
                    <strong i18next="task.added-by">Added by:</strong>
                    <span gm-colorize-user="constants.users[task.owner]">
                        {{ constants.users[task.owner].full_name }}
                    </span>
                </li>
                <li data-icon="u">
                    <strong i18next="task.assigned-to">Assigned to:</strong>
                    <span gm-colorize-user="constants.users[task.assigned_to]">
                        {{ constants.users[task.assigned_to].full_name || "Unassigned" }}
                    </span>
                </li>
                <li data-icon="w">
                    <strong i18next="task.created">Created:</strong>
                    <span>{{ task.created_date|momentFormat:"LLLL" }}</span>
                </li>
                <li data-icon="x">
                    <strong i18next="task.updated">Updated:</strong>
                    <span>{{ task.modified_date|momentFormat:"LLLL" }}</span>
                </li>
                <li data-icon="w" ng.show="task.finished_date">
                    <strong i18next="task.finished">Finished:</strong>
                    <span>{{ task.finished_date|momentFormat:"LLLL" }}</span>
                </li>
                <li data-icon="y" class="status-{{ task.status }}">
                    <strong i18next="task.status">Status:</strong>
                    <span>{{ constants.taskStatuses[task.status].name }}</span>
                </li>
                <li data-icon="z">
                    <strong i18next="task.attachments-count">Attachments:</strong>
                    <span>{{ attachments.length }}</span>
                </li>
                <li data-icon="r" ng-show="task.is_iocaine">
                    <strong i18next="task.is-iocaine">Is iocaine</strong>
                </li>
            </ul>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <div class="update-form">
                <h4 i18next="task.update-task">Update task</h4>

                <form class="form-horizontal" gm-checksley-form="ctrl.submit()">
                    <div>
                        <fieldset class="task-status">
                            <label class="control-label" i18next="task.status-label">Status</label>

                            <select class="status" name="status" ng-model="form.status"
                                    data-required="true" data-type="number"
                                    data-error-message="Required"
                                    ng-options="c.id as c.name for c in constants.taskStatusesList|orderBy:'order'"></select>
                        </fieldset>

                        <fieldset class="task-assigned">
                            <label i18next="task.assigned-to-label">Assigned to</label>

                            <select class="assigned-to" name="assigned_to"
                                    ng-model="form.assigned_to"
                                    ui-select2="assignedToSelectOptions"
                                    data-error-message="Required">
                                <option value="" i18next="task.unassigned">Unassigned</option>
                                <option ng-repeat="m in project.active_memberships" value="{{ m.user }}">
                                    {{ m.full_name }}
                                </option>
                            </select>
                        </fieldset>
                    </div>

                    <div>
                        <fieldset class="task-tags">
                            <label i18next="task.tags-label">Tags</label>
                            <input type="text" name="tags"
                                   ng-model="form.tags" ui-select2="tagsSelectOptions"
                                   data-placeholder="{{'task.tags-placeholder'|i18next }}" />
                        </fieldset>
                        <fieldset class="task-iocaine">
                            <input type="checkbox" name="is_iocaine" id="iocaine" class="hidden"
                                   ng-model="form.is_iocaine"></input>
                            <label for="iocaine">
                                <span data-icon="r" class="icon"></span>
                                <span i18next="task.is-iocaine">Is iocaine</span>
                            </label>
                        </fieldset>
                        <fieldset class="task-blocked">
                            <input type="checkbox"id="is-blocked" class="hidden"
                                   ng-model="form.is_blocked" name="is_blocked">
                            <label for="is-blocked">
                                <span data-icon="o" class="icon blocked"></span>
                                <span i18next="task.is-blocked">Is blocked</span>
                            </label>
                        </fieldset>
                    </div>
                    <div ng-show="form.is_blocked">
                        <fieldset>
                            <label i18next="task.blocking-reasons">Reasons for blocking</label>
                            <textarea class="blocked-note" name="blocked_note"
                                      placeholder="Some reasons..."
                                      i18next="placeholder:task.blocking-reasons-placeholder"
                                      ng-model="form.blocked_note"
                                      gm-markitup preview-id="blocked-preview"></textarea>
                            <div id="blocked-preview" class="preview"></div>
                        </fieldset>
                    </div>

                    <div ng-hide="_showHiddenGroups">
                        <p style="cursor: pointer" ng-click="_showHiddenGroups=true"
                           i18next="task.edit-subject-description">
                            Edit <b>Subject</b> and <b>Description</b>...
                        </p>
                    </div>

                    <fieldset class="task-subject" ng-show="_showHiddenGroups">
                        <label for="inputEmail" i18next="task.subject-label">Subject</label>
                        <input type="text" name="subject" ng-model="form.subject"></input>
                    </fieldset>

                    <fieldset class="task-description" ng-show="_showHiddenGroups">
                        <label for="inputEmail" i18next="task.description-label">Description</label>
                        <textarea name="description" ng-model="form.description"
                                  gm-markitup preview-id="description-preview"></textarea>
                        <div id="description-preview" class="preview"></div>
                    </fieldset>

                    <fieldset class="task-watchers">
                        <label i18next="task.watchers-label">Watchers</label>
                        <select name="watchers" multiple
                                ng-model="form.watchers" ui-select2="watcherSelectOptions"
                                data-placeholder="{{ 'task.watchers-placeholder'|i18next }}">
                            <option ng-repeat="m in project.active_memberships" value="{{ m.user }}">
                                {{ m.full_name }}
                            </option>
                        </select>
                    </fieldset>

                    <fieldset class="task-comment">
                        <label for="inputEmail" i18next="task.comment-label">Comment</label>
                        <textarea name="comment" ng-model="form.comment"
                                  gm-markitup preview-id="comment-preview"></textarea>
                        <div id="comment-preview"></div>
                    </fieldset>

                    <fieldset class="task-attachment">
                        <a class="add-attachment" data-icon="E" title="Add attachments"
                           gm-forward-click="#attachment_file_input" href=""
                           i18next="title:task.add-attachment,task.add-attachments">
                            Add attachments
                        </a>
                        <ul class="attachments-items">
                            <li class="attachments-item"
                                ng-repeat="attachment in newAttachments">
                                <a class="delete" data-icon="h" href=""
                                   title="Delete the new attachment"
                                   i18next="title:task.delete-new-attachment"
                                   ng-click="ctrl.removeNewAttachment(attachment)"></a>
                                <span>{{ attachment.name }}</span>
                                <span>[{{ attachment.size|sizeFormat }}]</span>
                            </li>
                        </ul>
                        <input type="file" class="hidden" name="newAttachments"
                               id="attachment_file_input" multiple="multiple"
                               gm-files="newAttachments"/>
                    </fieldset>

                    <fieldset class="task-edit-submit submit">
                        <button type="submit" class="button button-edit"
                                gm-checksley-submit-button i18next="task.save">
                            Save
                        </button>
                        <div gm-spinner class="spinner-container"></div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <div class="history" gm-history="task"
                 data-history-type="task"
                 data-object-id="taskId">
            </div>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <div class="view-footer">
                <p class="title">Task #{{ task.ref }}</p>
                <div class="buttons">
                    <a class="button button-delete" ng-click="ctrl.removeObject(task)"
                       i18next="task.delete-task">
                        Delete task
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/angular-template" id="change-template">
        <ul class="history-items">
            <li class="history-item" ng-repeat="hitem in historyItems">
                <div class="title">
                    <span class="updated">
                        <span i18next="task.updated-by-history">Updated by</span>
                        <span gm-colorize-user="hitem.by">{{ hitem.by.full_name }}</span></span>
                    <span class="date">{{ hitem.modified_date|momentFromNow }}</span>
                </div>
                <div class="changes">
                    <div class="change" ng-repeat="change in hitem.changes">
                        <strong>{{ change.name|capitalize }}</strong>:
                        <span ng-show="change.old != '' && change.old != null"
                              ng-bind-html="'task.change-from'|i18next:{value: change.old}"></span>
                        <span ng-bind-html="'task.change-to'|i18next:{value: change.new||''}"></span>
                    </div>
                </div>
                <div class="comment" ng-show="hitem.comment">
                    <strong i18next="task.comment-history">Comment:</strong>
                    <div gm-render-markdown="hitem.comment"></div>
                </div>
            </li>
        </ul>
    </script>
</div>
